<template>
    <div class="cDiffLayoutMainContent">
      <h1>这里演示如何在一个Vue里面切换不同的布局</h1>
      <form>
        <p>v-cloak 关键字使得在报错的时候不会暴露vue 中的代码但是有时候我们希望看到这些在开发的时候，只是不希望用户看到</p>
        <div class="swithTopBar">
          <p>a 标签如果写了href href="" 会造成意想不到的效果空白</p>
          <a class="list-icon" v-bind:class="{ 'active': layout == 'list'}" v-on:click="changeToList()"></a>
          <a class="grid-icon" v-bind:class="{ 'active': layout == 'grid'}" v-on:click="changeToGrid()"></a>
        </div>
        <ul v-if="layout === 'grid'" class="grid">
          <li v-for="(a, index) in articles" :key="index">
            <a v-bind:href="a.url" target="_blank">
              <img v-bind:src="a.image.large"/>
            </a>
          </li>
        </ul>
        <ul v-if="layout === 'list'" class="list">
          <li v-for="(a, index) in articles" :key="index">
            <a v-bind:href="a.url" target="_blank"><img v-bind:src="a.image.small" /></a>
            <p>{{a.title}}</p>
          </li>
        </ul>
      </form>
    </div>
</template>
<script>
export default {
  name: 'changeDiffLayout',
  data () {
    return {
      title: 'changeDiffLayout title',
      layout: 'grid',
			articles: [
				{
            "title": "HTML 教程",
            "url": "http://www.runoob.com/html/html-tutorial.html",
            "image": {
                "large": "http://static.runoob.com/images/mix/htmlbig.png",
                "small": "http://static.runoob.com/images/icon/html.png"
            }
        },
        {
            "title": "CSS 教程",
            "url": "http://www.runoob.com/css/css-tutorial.html",
            "image": {
                "large": "http://static.runoob.com/images/mix/cssbig.png",
                "small": "http://static.runoob.com/images/icon/css.png"
            }
        },
        {
            "title": "JS 教程",
            "url": "http://www.runoob.com/js/js-tutorial.html",
            "image": {
                "large": "http://static.runoob.com/images/mix/jsbig.jpeg",
                "small": "http://static.runoob.com/images/icon/js.png"
            }
        },
        {
            "title": "SQL  教程",
            "url": "http://www.runoob.com/sql/sql-tutorial.html",
            "image": {
                "large": "http://static.runoob.com/images/mix/sqlbig.png",
                "small": "http://static.runoob.com/images/icon/sql.png"
            }
        },
        {
            "title": "Ajax 教程",
            "url": "http://www.runoob.com/ajax/ajax-tutorial.html",
            "image": {
                "large": "http://static.runoob.com/images/mix/ajaxbig.png",
                "small": "http://static.runoob.com/images/icon/ajax.png"
            }
        },
        {
            "title": "Python 教程",
            "url": "http://www.runoob.com/pyhton/pyhton-tutorial.html",
            "image": {
                "large": "http://static.runoob.com/images/mix/pythonbig.png",
                "small": "http://static.runoob.com/images/icon/python.png"
            }
        }
			]
    }
  },
  methods: {
    changeToGrid:function () {
      this.layout = 'grid'
    },
    changeToList: function () {
      this.layout = 'list'
    }
  }
}
</script>
<style>

*{
  margin: 0;
  padding: 0;
}

.cDiffLayoutMainContent{
  font:15px/1.3 'Open Sans', sans-serif;
	color: #5e5b64;
	text-align:center;
}

[v-cloak]{
  display: none;
}

/*------------------------------------------------------------
    搜索框
--------------------------------------------------------------*/
.swithTopBar{
  background-color: #5c9bb7;

  background-image:-webkit-linear-gradient(top, #5c9bb7, #5392ad);
  background-image:-moz-linear-gradient(top, #5c9bb7, #5392ad);
  background-image:linear-gradient(top, #5c9bb7, #5392ad);

  box-shadow: 0 1px 1px #cccccc;
  border-radius: 2px;
  width: 580px;
  padding: 10px;
  margin: 45px auto 25px;
  position: relative;
  text-align: right;
  line-height: 1;
}

.swithTopBar a{
  background:#4987a1 center center no-repeat;
  width:32px;
  height:32px;
  display:inline-block;
  text-decoration:none !important;
  margin-right:5px;
  border-radius:2px;
  cursor:pointer;
}

/*------------------------------------------------------------
    网格布局
--------------------------------------------------------------*/
.swithTopBar a.active{
  background-color: #c14694;
}

.swithTopBar a.list-icon{
  background-image:url();
}

.swithTopBar a.grid-icon{
  background-image:url();
}

.swithTopBar input{
  background:#fff no-repeat 13px 13px;

  border: none;
  width: 100%;
  line-height: 19px;
  padding: 11px 0;

  border-radius: 2px;
  box-shadow: 0 2px 8px #c4c4c4 inset;
  text-align: left;
  font-size: 14px;
  font-family: inherit;
  color: #738289;
  font-weight: bold;
  outline: none;
  text-indent: 40px;
}

/*------------------------------------
    	列表布局
   -----------------------------------------*/
.cDiffLayoutMainContent form ul.list{
  list-style: none;
  width: 500px;
  margin: 0 auto;
  text-align: left;
}

.cDiffLayoutMainContent form ul.list li{
  border-bottom: 1px solid #dddddd;
  padding: 10px;
  overflow: hidden;
}

.cDiffLayoutMainContent form ul.list li img{
  width:120px;
  height:120px;
  float:left;
  border:none;
}

.cDiffLayoutMainContent form ul.list li p{
  margin-left: 135px;
  font-weight: bold;
  color:#6e7a7f;
}

/*-----------------------------------
    	网格布局
   ------------------------------*/
.cDiffLayoutMainContent form ul.grid{
  list-style: none;
  width: 570px;
  margin: 0 auto;
  text-align: left;
}

.cDiffLayoutMainContent form ul.grid li{
  padding: 2px;
  float:left;
}

.cDiffLayoutMainContent form ul.grid li img{
  width:280px;
  height:280px;
  object-fit: cover;
  display:block;
  border:none; 
}

</style>

